<template>
  <view class="pro-content w100">
    <view class="content flex">
      <view class="img" @click="$myTool.previewImage(params.coverImg)"
        ><xh-img :src="params.coverImg" v-if="params.coverImg"
      /></view>
      <view class="right flex1 flex-col">
        <view class="title text-29">{{ params.title }}</view>
        <view class="text-26"
          >售价：
          <span>
            {{
              params.minPrice === params.maxPrice
                ? `¥${(params.minPrice / 100).toFixed(2)}`
                : `¥${(params.minPrice / 100).toFixed(2)}-¥${(
                    params.maxPrice / 100
                  ).toFixed(2)}`
            }}</span
          >
        </view>
        <view class="flex text-24">
          <view>库存：{{ params.inventory || 0 }}</view>
          <view>销量：{{ params.taotalSells || 0 }}</view>
        </view>
      </view>
    </view>
    <view
      :class="[
        'options',
        'text-26',
        'flex',
        pubUserInfo.mainShopStatus ? 'flex-btw' : 'no-bte , flex-end',
      ]"
    >
      <view class="edit center" @click="operation(1, params)">编辑</view>
      <view class="status center" @click="operation(2)">{{
        params.status == 0 ? "上架" : "下架"
      }}</view>
      <view
        class="delete center"
        @click="operation(3)"
        v-if="pubUserInfo.mainShopStatus"
        >删除</view
      >
      <view
        class="copy center"
        @click="operation(4)"
        v-if="pubUserInfo.mainShopStatus"
        >复制</view
      >
    </view>
  </view>
</template>
<script>
import {
  batchModifyStatusByGoodsId,
  deleteProduct,
} from "@/service/api/sp-product/index";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    params: {
      default: {},
      require: true,
    },
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    ...mapState("sp-common/auth", ["pubUserInfo"]),
  },
  methods: {
    operation(type) {
      let {
        params,
        params: { status, id },
        pubUserInfo: { mainShopStatus },
      } = this;
      if (type == 1) {
        this.$myTool.jumpPage("addProduct", { goodsId: id, type: "edit" });
      } else if (type == 2) {
        let content = mainShopStatus
          ? `${status == 0 ? "上架" : "下架"}后全部门店将统一${
              status == 0 ? "上架" : "下架"
            }，请谨慎操作`
          : `${
              status == 0
                ? "上架后将在当前门店售卖，请谨慎操作"
                : "下架后将在当前门店不可购买，请谨慎操作"
            }`;
        uni.showModal({
          title: `是否${status == 0 ? "上架" : "下架"}当前商品？`,
          content,
          confirmColor: this.themeColor,
          success: (res) => {
            if (res.confirm) {
              let params = {
                mainShopStatus: this.pubUserInfo.mainShopStatus,
                goodsIds: [id],
                status: status === 0 ? 1 : 0,
              };
              batchModifyStatusByGoodsId(params).then((res) => {
                this.$parent.getProduct(1);
              });
            }
          },
        });
      } else if (type == 3) {
        uni.showModal({
          title: `是否删除当前商品？删除后不可找回，请谨慎操作！`,
          content: "注：删除不影响已产生的订单数据",
          confirmColor: this.themeColor,
          success: (res) => {
            if (res.confirm) {
              deleteProduct({ goodsId: id }).then((res) => {
                uni.showToast({
                  icon: "none",
                  title: "删除商品成功",
                  success: () => {
                    this.$parent.getProduct(1);
                  },
                });
              });
            }
          },
        });
      } else {
        this.$myTool.jumpPage("addProduct", { goodsId: id, type: "copy" });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pro-content {
  background-color: #fff;
  width: calc(100% - 85rpx);
  padding: 30rpx 25rpx;
  padding-right: 30rpx;
  position: relative;
  margin-bottom: 2rpx;
  // border-right: 30rpx solid #f7f7f7;
  // margin-right: 30rpx;
  ::after {
    content: "";
    height: 1rpx;
    width: calc(100% + 35rpx);
    bottom: -1rpx;
    left: 0;
    background: #e7e7e7;
    position: absolute;
  }
  .img {
    width: 114rpx;
    height: 114rpx;
    border-radius: 8rpx;
    margin-right: 15rpx;
    overflow: hidden;
  }
  .right {
    width: 0;
    justify-content: space-between;
    .title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .text-26 {
      span {
        color: #f05357;
      }
    }
    .text-24 {
      color: #888;
      view:first-child {
        margin-right: 66rpx;
      }
    }
  }
  .options {
    color: #fff;
    margin-top: 30rpx;

    view {
      width: 100rpx;
      border-radius: 8rpx;
      height: 40rpx;
    }
    // }

    .edit {
      background-color: var(--theme);
    }
    .status {
      background: #b7c4b8;
    }
    .delete {
      background: #f17377;
    }
    .copy {
      background: #89b8d8;
    }
  }
}
.no-bte {
  view {
    margin-left: calc((100% - 400rpx) / 3);
  }
}
</style>
